<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="mall/header::head-fragment('Magic_Coffee咖啡店-购物车','cart')">
</head>
<body>
<header th:replace="mall/header::header-fragment"></header>
<content id="content">
    <nav th:replace="mall/header::header-search-fragment"></nav>
    <div class="crumb">
        <div class="w">
            <div class="crumb-con">
                <a href="index.html" class="link">Mall</a>
                <span> > </span>
                <span class="link-text">购物车列表</span>
            </div>
        </div>
    </div>

    <div class="page-wrap w">
        <th:block th:unless="${#lists.isEmpty(cartListVO)}">
        <div class="cart-header">
            <table class="cart-table">
                <tr>
                    <th class="cart-cell cell-check">
                        <label class="cart-label">
                            <th:block th:if="${cartListVO.allChecked == true}">
                            <input type="checkbox" class="cart-select-all" checked />
                            </th:block>
                            <th:block th:unless="${cartListVO.allChecked == true}">
                            <input type="checkbox" class="cart-select-all" />
                            </th:block>
                            <span>全选</span>
                        </label>
                    </th>
                    <th class="cart-cell cell-info">商品信息</th>
                    <th class="cart-cell cell-price">单价</th>
                    <th class="cart-cell cell-count">数量</th>
                    <th class="cart-cell cell-total">合计</th>
                    <th class="cart-cell cell-opera">操作</th>
                </tr>
            </table>
        </div>
        <div class="cart-list">
            <th:block th:each="cartProductVO : ${cartListVO.cartProductVOList}">
            <table class="cart-table" th:attr="data-product-id=${cartProductVO.productId}">
                    <tr>
                        <td class="cart-cell cell-check">
                            <label class="cart-label">
                                <th:block th:if="${cartProductVO.productChecked == 1}">
                                <input type="checkbox" class="cart-select" onclick="cartSelect(this)" checked />
                                </th:block>
                                <th:block th:unless="${cartProductVO.productChecked == 1}">
                                <input type="checkbox" class="cart-select" onclick="cartSelect(this)"/>
                                </th:block>
                            </label>
                        </td>
                        <td class="cart-cell cell-img">
                            <a class="link" th:href="@{'./detail.html?productId='+${cartProductVO.productId} }"></a>
                            <img class="p-img" th:src="@{ ${cartListVO.imageHost}+${cartProductVO.productMainImage} }" th:alt="${cartProductVO.productName}"></img>
                        </td>
                        <td class="cart-cell cell-info">
                            <a class="link" th:href="@{ './detail.html?productId='+${cartProductVO.productId} }" th:text="${cartProductVO.productName}">{{productName}}</a>
                        </td>
                        <td class="cart-cell cell-price" th:value="${cartProductVO.productPrice}" th:text="'￥'+${cartProductVO.productPrice}">￥{{productPrice}}</td>
                        <td class="cart-cell cell-count">
                            <span class="count-btn minus">-</span>
                            <input class="count-input" th:value="${cartProductVO.quantity}" th:attr="data-max-stock=${cartProductVO.productStock}" />
                            <span class="count-btn plus">+</span>
                        </td>
                        <td class="cart-cell cell-total" th:value="${cartProductVO.productTotalPrice}" th:text="'￥'+${cartProductVO.productTotalPrice}"></td>
                        <td class="cart-cell cell-opera">
                            <span class="link cart-delete">删除</span>
                        </td>
                    </tr>
            </table>
            </th:block>
        </div>
        <div class="cart-footer">
            <div class="select-con">
                <label>
                    <th:block th:if="${cartListVO.allChecked == true}">
                        <input type="checkbox" class="cart-select-all" checked />
                    </th:block>
                    <th:block th:unless="${cartListVO.allChecked == true}">
                        <input type="checkbox" class="cart-select-all" />
                    </th:block>
                    <span>全选</span>
                </label>
            </div>
            <div class="delete-con">
                <span class="link delete-selected">
                    <i class="fa fa-trash-o"></i>
                    <span>删除选中</span>
                </span>
            </div>
            <div class="submit-con">
                <span>总价：</span>
                <span class="submit-total" th:value="${cartListVO.cartTotalPrice}" th:text="'￥'+${cartListVO.cartTotalPrice}" >￥{{cartTotalPrice}}</span>
                <span class="btn btn-submit">去结算</span>
            </div>
        </div>
        </th:block>

        <th:block th:if="${#lists.isEmpty(cartListVO)}">
        <p class="err-tip">
            <span>您的购物车空空如也，</span>
            <a href="./index.html">立即去购物</a>
        </p>
        </th:block>
    </div>

</content>
<div th:replace="mall/general-footer::general-footer-fragment"></div>

<script th:src="@{/admin/plugins/jquery/jquery-3.5.1.min.js}"></script>
<script th:src="@{/mall/js/search.js}" type="text/javascript"></script>
<script th:src="@{/mall/js/cart.js}" type="text/javascript"></script>

</body>
</html>